
<template>
    <div class="settings_page">
        <TopHeader />
        <div class="page_top">
            <img src="../../assets/imgx/title-bg-image.png" />

            <div> <span>数据统计</span> <a>DATA STATISTICS</a><img src="../../assets/icon/title-tail.png" alt="" /> </div>
            <span class="maintain_top_button" @click="$router.push('/')">
                返回
            </span>
        </div>

        <div class="page_center">
            <div class="page_center_left">
                <template v-for="(v, i) in PathArray">
                    <div :key="v.id" @click="broadsideDtnFun(v)" v-if="v.roles.includes(role)">
                        <img src="../../assets/imgx/energy.png" alt="">
                        <span :style="{ 'color': $route.path == v.path ? '#97D9FF ' : '' }">{{ v.title }}</span>
                    </div>
                </template>
            </div>

            <div class="page_center_right">
                <slotCom>
                    <template v-slot:com>

                        <router-view></router-view>

                    </template>
                </slotCom>
            </div>

        </div>
    </div>
</template>
<script>
import TopHeader from '@/components/TopHeader.vue'
import { mapGetters } from 'vuex'
import slotCom from "@/components/SslotCom/index.vue"
export default {

    name: "SettingsPage",
    components: { TopHeader, slotCom },
    data() {
        return {

            id: 0,
            token: "",
            username: "",
            PathArray: [
            
                {
                    "id": 0,
                    "title": "打卡记录",
                    "path": "/statistics/Clockrecords"
                    , "roles": ['admin']
                },
                {
                    "id": 1,
                    "title": "故障维修统计",
                    "path": "/statistics/FaultMaintenance"
                    , "roles": ['admin']
                },
                {
                    "id": 2,
                    "title": "产量统计",
                    "path": "/statistics/ProductionStatistics"
                    , "roles": ['admin']
                },
                ///statistics/MesRecordExceptFaultAlarmRecord
                {
                    "id": 3,
                    "title": "故障报警记录",
                    "path": "/statistics/MesRecordExceptFaultAlarmRecord"
                    , "roles": ['admin']
                },
                // "/statistics/maintenanceLog",
                {
                    "id": 4,
                    "title": "保养记录",
                    "path": "/statistics/maintenanceLog",
                    "roles": ['admin']
                },

            ]
        }
    },
    mounted() {
        this.username = this.$cookies.get("username") ? this.$cookies.get("username") : "";

        this.token = this.$cookies.get("token") ? this.$cookies.get("token") : "";
    },
    computed: {
        ...mapGetters(['role'])
    },
    methods: {
    
        broadsideDtnFun(item) {
            this.id = item.id;
            this.$router.push(item.path)
        }
    }
}
</script>
<style lang="less" scoped>
.maintain_top_button {
    cursor: pointer;
    background: url("../../assets/imgx/out_btn.png");
    background-repeat: no-repeat;
    line-height: 30px;
    font-size: 10px;
    text-align: center;
    color: white;
    width: 95px;
    height: 30px;
    position: absolute;
    top: 0%;
    right: 0px;


}

/deep/.el-input__icon {
    height: 30px !important;

}

/deep/.el-input__inner {
    background: none !important;
    border-radius: 16px 16px 16px 16px !important;
    opacity: 1 !important;
    height: 30px;
    border: 1px solid #02489E !important;
}

.settings_page {
    width: 100%;
    height: 100%;

    .page {
        position: relative;
        margin-bottom: 15px;

        .img-style {
            height: 44px;
        }

        .setting_img {
            width: 130px;
            height: 40px;
            position: absolute;
            left: 1200.94px;
            top: 10px;
        }

        .to_button {
            position: absolute;
            left: 1210.94px;
            top: 2px;
            width: 97.15px;
            height: 35.53px;
            text-align: center;
            color: white;
            line-height: 49px;
        }

        .page-title {

            img {
                width: 20px;
                height: 20px;

            }

            position: absolute;
            top: 3px;
            right: 2%;
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #0D369F;
        }
    }

    .page_top {
        height: 40px;
        color: white;
        position: relative;
        margin-left: 10px;

        img {
            width: 403px;
            height: 39px;
        }

        div {
            position: absolute;
            top: 4px;
            left: 60px;

            span {
                font-size: 16px;
            }

            a {
                color: rgba(28, 114, 194, 1);
                font-size: 10px;
            }

            img {
                width: 8px;
                height: 8px;
                margin-left: 10px;
            }
        }
    }


    .page_center {

        display: flex;
        width: 100%;
        margin-top: 25px;

        .page_center_left {
            height: 100%;
            margin: 0px 15px 0px 0px;
            font-size: 15px;
            cursor: pointer;

            div {
                width: 136px;
                height: 33px;
                line-height: 33px;
                position: relative;
                margin-bottom: 30px;

                img {
                    width: 100%;
                    height: 100%;
                    position: absolute;

                }

                span {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    color: #297aa8;
                    position: absolute;
                    font-size: 15px;
                    z-index: 1;
                    font-family: "思源黑体", "Microsoft YaHei";

                }
            }
        }

        .page_center_right {
            width: 1715px;
            height: 875px;
            background: linear-gradient(to right #021130 #010D2A);
            opacity: 1;
            border: 0.44px solid #00467d;

            // border: 3px solid #00469C;
            // 四个角
            // border-image-source: radial-gradient(60% 87%, transparent 75px, transparent 100%, #4379a7 65%);
            // border-image-slice: 1;
            // border-style: solid;
        }
    }
}
</style>
